<template>
  <el-dialog
    top="30px"
    width="80%"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="d-flex justify-content-between mb-5">
      <div style="width: 150px"></div>
      <div class="d-flex justify-content-center align-items-center">
        <el-button @click="onDateChange(false)" :disabled="preDisabled || loading">
          <i class="el-icon-arrow-left el-icon--right"></i>
          <span>上一季度</span>
        </el-button>
        <div class="mx-3">{{ dateLabel }}</div>
        <el-button @click="onDateChange(true)" :disabled="nextDisabled || loading">
          <span>下一季度</span>
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </div>
      <div style="min-width: 150px" class="text-right">
        <el-button
          icon="el-icon-download"
          :disabled="loading"
          :loading="downloadLoading"
          @click="onDownload"
        >
          下载
        </el-button>
        <template v-if="nextDisabled">
          <el-tooltip effect="dark" content="根据上季度报表重新生成本季度报表" placement="bottom">
            <el-button
              icon="el-icon-refresh"
              v-show="refreshEnabled"
              :disabled="loading"
              :loading="refreshLoading"
              @click="onRefresh"
            >
              刷新
            </el-button>
          </el-tooltip>
          <el-button
            icon="el-icon-delete"
            v-show="false"
            :disabled="loading"
            :loading="refreshLoading"
            @click="deleteReport"
          >
            删除
          </el-button>
        </template>
      </div>
    </div>
    <quarter-report-city
      ref="reportRef"
      :query-year="innerYear"
      :query-quarter="innerQuarter"
      @loading="onLoading"
    ></quarter-report-city>
  </el-dialog>
</template>

<script>
import { enumQuarter, isQuarterDisabled } from '@/credit/views/city/report/reportMixins'

import QuarterReportCity from '@/credit/views/city/report/QuarterReportCity'

export default {
  components: {
    QuarterReportCity,
  },
  props: {
    visible: Boolean,
    queryYear: Number,
    queryQuarter: Number,
  },
  data() {
    return {
      loading: false,
      downloadLoading: false,
      refreshLoading: false,
      innerYear: 0,
      innerQuarter: 0,
      preDisabled: false,
      nextDisabled: false,
    }
  },
  computed: {
    dateLabel() {
      return `${this.innerYear}年 / 第${enumQuarter[this.innerQuarter]}季度`
    },
    isLastQuarter() {
      return this.innerQuarter === 4
    },
    refreshEnabled() {
      const date = new Date()
      const year = date.getFullYear()

      if (year < this.innerYear) {
        return false
      }

      const innerMonth = this.isLastQuarter ? 0 : this.innerQuarter * 3
      const innerYear = this.isLastQuarter ? this.innerYear + 1 : this.innerYear
      const startEditDate = new Date(innerYear, innerMonth, 1)
      const endEditDate = new Date(innerYear, innerMonth, innerMonth === 9 ? 12 : 5)

      return date >= startEditDate && date <= endEditDate
    },
  },
  watch: {
    visible: {
      handler: 'handleQueryDate',
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleQueryDate() {
      if (!this.visible) return
      this.innerYear = this.queryYear
      this.innerQuarter = this.queryQuarter
      this.setDisabled()
    },
    onDateChange(isNext) {
      const [year, quarter] = isNext ? this.getNextDate() : this.getPreDate()

      this.innerYear = year
      this.innerQuarter = quarter

      this.setDisabled()
    },
    onLoading(loading) {
      this.loading = loading
    },
    setDisabled() {
      const [preYear, preQuarter] = this.getPreDate()
      this.preDisabled = isQuarterDisabled(preYear, preQuarter)

      const [nextYear, nextQuarter] = this.getNextDate()
      this.nextDisabled = isQuarterDisabled(nextYear, nextQuarter)
    },
    getPreDate() {
      let preQuarter = this.innerQuarter - 1
      let preYear = this.innerYear
      if (preQuarter < 1) {
        preQuarter = 4
        preYear--
      }
      return [preYear, preQuarter]
    },
    getNextDate() {
      let nextQuarter = this.innerQuarter + 1
      let nextYear = this.innerYear
      if (nextQuarter > 4) {
        nextQuarter = 1
        nextYear++
      }
      return [nextYear, nextQuarter]
    },
    onDownload() {
      const { reportRef } = this.$refs
      if (reportRef) {
        this.downloadLoading = true
        reportRef.onExportExcel().finally(() => {
          this.downloadLoading = false
        })
      }
    },
    onRefresh() {
      const { reportRef } = this.$refs
      if (reportRef) {
        this.refreshLoading = true
        reportRef.refreshReport().finally(() => {
          this.refreshLoading = false
        })
      }
    },
    deleteReport() {
      const { reportRef } = this.$refs
      if (reportRef) {
        this.refreshLoading = true
        reportRef.deleteReport().finally(() => {
          this.refreshLoading = false
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
